body{
    background-color: #E9E9E9;
}
*{
    padding: 0;
    margin: 0;
}
.Iconlist{
    width: 755px;
    height: 302px;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    margin: 30px auto;
    list-style:none none outside;
}

ul.Iconlist li {
    float: left;
    text-align: center;
    line-height: 150px;
    width: 150px;
    height: 150px;
    background-color: #f4f4f4;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;  
    color: #888;
    display: block;
}
ul.Iconlist li:hover{
    background-color: #fff;
    color: red;

} 
@font-face{
    font-family: "font-icon";
    src:url('fonts/icomoon.svg');
    src:url('fonts/icomoon.eot?iefix') format('embedded-opentype')
        ,url('fonts/icomoon.woff') format('woff')
        ,url('fonts/icomoon.ttf') format('truetype')
        ,url('fonts/icomoon.svg') format('svg');
    font-weight:normal;
    font-style:normal;
}
.font-icon{
    font-family: "font-icon";
    font-weight:normal;
    font-style:normal;
    font-size: 64px;
    -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.shadow{
    color: #fff;
    text-shadow: 5px 5px 0px red,10px 10px 0px rgba(0,0,0,0.5);
}
.spinner{
    -webkit-animation: spinner 2s infinite linear;
    animation: spinner 2s infinite linear; 
}
@-webkit-keyframes spinner{
    0%{
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100%{
        -webkit-transform:rotate(359deg);
        transform:rotate(359deg);
    }
}
@keyframes spinner{
    0%{
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100%{
        -webkit-transform:rotate(359deg);
        transform:rotate(359deg);
    }
}
.icon-6:before{
    content: "\e916"
}
.icon-7:before{
    content: "\e917"
}
.icon-8:after{
    content: "\e9da"
}
.icon-8:before{
    content: "\e9db"
}
.icon-9:before{
    content: "\e982"
}
.icon-10:before{
    content: "\e920"
}
